<template>
    <div class="layers-panle">
        <div>图层</div>

        <div class="layers-content">
                <el-checkbox v-for="layer in layersCheck" :key="layer['layerid']" v-model="layer.checked" @change="handleChange">{{ layer["name"] }}</el-checkbox>
           
        </div>
    </div>
</template>

<script setup>
import { useLayersStore } from '@/stores/layers';
import { onMounted, ref } from 'vue';

const layersStore = useLayersStore();
const { layers } = layersStore
const layersCheck = ref([])

for (let i = 0; i < layers.length; i++) {
    layersCheck.value.push({layerid:i, name: layers[i][0], checked: layers[i][1].getVisible()})
}
onMounted(()=>{
   
})
const handleChange = () => {
    for (let i = 0; i < layersCheck.value.length; i++) {
        console.log(layersCheck.value[i])
        layers[i][1].setVisible(layersCheck.value[i].checked)
    }
}
</script>

<style scope>
.layers-panle {
    position: absolute;
    bottom: 20px;
    left: 10px;
}
</style>